<template>
  <div class="asideTable">
    <div class="aside_table_div">
      <el-table
        :data="otherList"
        row-key="id"
        ref="asideTableRef"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="50" type="selection" :reserve-selection="true" :selectable="selectable"></el-table-column>
        <el-table-column prop="serialNumber" label="序号" width="60">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="storehouseName" label="仓库名称"></el-table-column>
      </el-table>
    </div>
    <!-- <div class="lowMarket">
      <div>{{ permitData.permitContext }}</div>
      <el-input v-model="permitData.permitValue" type="number" @focus="focusinSelect"></el-input>
    </div>-->
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    isAdmin: {
      type: Boolean,
      default: false,
    },
    checkIds: Array,
    permitData: Object,
  },
  data () {
    return {
      inputValue: '',
      selectId: [],
      otherList: [],
      roleCode: '',
    }
  },
  // watch: {
  //   tableData (val) {
  //     console.log('数据传过来', val)
  //     this.otherList = val
  //     this.otherList.forEach((el) => {
  //       if (el.selected) {
  //         this.$refs.asideTableRef.toggleRowSelection(el, true)
  //       }
  //     })
  //   },
  // },
  watch: {
    isAdmin(val){
      if (this.$refs.asideTableRef) {
        if(val && this.otherList.length > 0){
          this.otherList.forEach(row => {
            this.$refs.asideTableRef.toggleRowSelection(row, true)
          })
        } else {
          this.$refs.asideTableRef.clearSelection()
        }
      }
    }
  },
  methods: {
    edit(list, roleCode) {
      this.roleCode = roleCode
      this.$refs.asideTableRef.clearSelection();
      this.otherList = list
      let rows = []
      // 取出所有选中的项
      this.otherList.forEach((el) => {
        if (el.selected) {
          rows.push(el)
        }
      })
      // 将选中项展示对勾
      rows.forEach(row => {
        this.$refs.asideTableRef.toggleRowSelection(row)
      })
    },
    // 判断是否禁用多选框
    selectable(row, rowIndex) {
      if (this.roleCode == 'admin' || this.isAdmin) {
        return false
      } else {
        return true
      }
    },
    handleInput () {
      alert('发送数据')
    },
    // 多选选择
    handleSelectionChange (val) {
      this.otherList.forEach((el) => {
          el.selected = false
        })
      if (val.length == 0) {
      } else {
        val.forEach((res) => {
          res.selected = true
          this.otherList.forEach((el) => {
            if (res.id == el.id) {
              el = res
            }
          })
        })
      }
    },
    // 新增数据中表格内输入框聚焦时选中
    focusinSelect () {
      event.target.select()
    },
  },
}
</script>

<style scoped lang='scss'>
.asideTable {
  height: 100%;
}
.aside_table_div {
  width: 100%;
  height: calc(100% - 40px);
  .el-table {
    height: 100%;
    overflow: auto;
  }
}
.lowMarket {
  width: 100%;
  height: 40px;
  font-size: 0.225014rem;
  color: #666;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 10px;
  > div {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
  }
  ::v-deep .el-input__inner {
    width: 56px;
    height: 0.562535rem;
    margin-left: 10px;
    padding: 0 7px;
    font-size: 12px;
    color: #666;
  }
}
</style>